<template>
    <div class="root_main">
        <br>
        <el-switch
                v-model="listenAllRoom"
                active-text="监视所有办公室"
                inactive-text="监视本办公室">
        </el-switch>
        <div style="text-align: left">
            <solving-win :reportId="reportId"
                         v-if="showSolvingWin"
                         @onCancel="showSolvingWin=false"
                         @updateRows="fetchReport();showSolvingWin=false"
            ></solving-win>
            <danger-op-win v-if="showDelWin" text="删除此问题报告将无法撤销，你确定删除吗？" @onOk="delReport" @onCancel="showDelWin=false"></danger-op-win>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="新问题" name="new">
                <el-table
                        :data="filteredNewReport"
                        style="height: 500px;margin: 0 auto
                        ;width: 100%">
                    <el-table-column prop="faultObjType" label="故障类型" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="问题描述" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地点" width="80">
                    </el-table-column>
                    <el-table-column prop="user.userName" label="联系人" width="80">
                    </el-table-column>
                    <el-table-column prop="user.phoneNum" label="联系人电话" width="180">
                    </el-table-column>
                    <el-table-column prop="createdAt" label="时间" >
                    </el-table-column>
                    <el-table-column  label="操作" fixed="right" width="130">
                        <div slot-scope="scope" >
                            <el-button  v-if="scope.row.imgs!=null&&scope.row.imgs!=''" @click="showImgs(scope.row.imgs)" type="text" size="small">图片</el-button>
                            <el-button  @click="acceptReport(scope.row.id,$store.state.userState.id)" type="text" size="small">接受</el-button>
                            <el-button @click="reportToDel=scope.row.id;showDelWin=true;" type="text" size="small">删除</el-button>
           </div>
                    </el-table-column>
                </el-table>
                <br><br>
            </el-tab-pane>

            <el-tab-pane label="待处理" name="second">
                <el-table
                        :data="unhandledReport"
                        style="width: 100%">
                    <el-table-column prop="faultObjType" label="故障类型" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="问题描述" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地点" width="80">
                    </el-table-column>
                    <el-table-column prop="user.userName" label="联系人" width="80">
                    </el-table-column>
                    <el-table-column prop="user.phoneNum" label="联系人电话" width="180">
                    </el-table-column>
                    <el-table-column prop="createdAt" label="时间" >
                    </el-table-column>

                    <el-table-column  label="操作" fixed="right" width="130">
                        <div slot-scope="scope" >
                            <el-button  v-if="scope.row.imgs!=null&&scope.row.imgs!=''" @click="showImgs(scope.row.imgs)" type="text" size="small">图片</el-button>
                            <el-button  type="text" size="small" @click="reportId=scope.row.id;showSolvingWin=true">处理</el-button>
      </div>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <!--<el-tab-pane label="已处理" name="third">已处理</el-tab-pane>-->

        </el-tabs>
    </div>

</template>

<script>
    import FrmFeService from '../service/FrmFeService'
    import SolvingWin from './dialogs/SolvingWin'
    import DangerOpWin from "./dialogs/DangerOpWin";
    import {baseURL} from '../service/ajax/ApiCaller'
    import storeUtil from '../utils/storeUtil'
    export default {
        name: "RootMain",
        components:{DangerOpWin, SolvingWin},
        created(){
            this.fetchReport()
            let app=this
            let source = new EventSource(baseURL+'comet/sse');
            source.onmessage = function(event) {
                app.serverMsgVersion=event.data
                if(app.filteredNewReport.length>0)
                {
                    eventBus.$emit("ring")
                }
                if(app.clientMsgVersion<app.serverMsgVersion){
                    console.log("FETCH,CV:"+app.clientMsgVersion+" SV:"+app.serverMsgVersion)
                    app.fetchReport()

                }
                else {
                    console.log("NOT FETCH,CV:"+app.clientMsgVersion+" SV:"+app.serverMsgVersion)
                }
            }

        },
        updated(){

        },
        computed:{
            ...storeUtil.makeFields(['userState','clientMsgVersion','serverMsgVersion','newReport','listenAllRoom']),
            filteredNewReport(){
                let app=this
                return app.newReport.filter(function (x) {
                    if(!app.listenAllRoom&&(x.room!==app.$store.state.userState.room))
                    {
                        return false
                    }
                    return true
                }
               )
            }
        },
        data(){
            return{
                reportToDel:null,
                showSolvingWin:false,
                showDelWin:false,
                activeName:"new",
                roomFilter:true,
                unhandledReport:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1:''
            }
        },
        methods:{
            showImgs(imgs){
                this.$alert( '<img style="width: 100%" src="'+baseURL+"res/"+imgs+'">',"图片", {
                    dangerouslyUseHTMLString: true
                });

            },
            handleClick(){},
            delReport(){
                let app=this
                this.$message('删除中...');
                FrmFeService.delReport(app.reportToDel).then(resp=>{
                    app.fetchReport()
                    this.$message('已删除');
                    this.showDelWin=false
                })
            },
            fetchReport()
            {

                console.log("FETCH")
                let app=this
                FrmFeService.getNew().then(resp=>{
                    app.newReport.splice(0,app.newReport.length)
                    for (let i = 0; i <resp.data.data.length; i++) {
                            app.newReport.push(resp.data.data[i])

                    }
                })
                FrmFeService.getUnhandled().then(
                    resp=>{
                        app.unhandledReport.splice(0,app.unhandledReport.length)
                        for (let i = 0; i <resp.data.data.length; i++) {
                            app.unhandledReport.push(resp.data.data[i])
                        }

                        FrmFeService.getVersion().then(
                            resp=>{
                                app.clientMsgVersion=resp.data
                            }
                        )
                    }
                )
            },
            acceptReport(id,operatorId){
                let app=this
                this.$message('接受中...');
                FrmFeService.acceptReport(id,operatorId).then(resp=>{
                    app.fetchReport()
                    app.$message('已接受');
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/scss/base.scss";






</style>